<template>
    <el-dialog title="新增分类" :visible.sync="boxShow.isShow" @closed="reset">
    <el-form :model="cateForm" :rules="rules" ref="refCateForm">
        <el-form-item label="上级分类" :label-width="formLabelWidth" prop="pid">
            <el-select v-model="cateForm.pid" placeholder="请选择上级分类">
                <el-option label="一级分类" :value="0"></el-option>
                <el-option 
                    v-for="cate in cateList"
                    :key="cate.id"
                    :label="cate.catename" 
                    :value="cate.id"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="分类名称" :label-width="formLabelWidth" prop="catename">
            <el-input v-model="cateForm.catename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="img" label="分类图片" :label-width="formLabelWidth" v-if="cateForm.pid !== 0">
            <el-upload
                action="#"
                :file-list="fileList"
                :auto-upload="false"
                :limit="1"
                :on-exceed="limitTips"
                :on-change="changeImage"
                list-type="picture-card">
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="分类状态" :label-width="formLabelWidth" prop="status">
            <template>
                <el-radio v-model="cateForm.status" :label="1">启用</el-radio>
                <el-radio v-model="cateForm.status" :label="2">禁用</el-radio>
            </template>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
    </div>
    </el-dialog>
</template>

<script>
import {mapState,mapActions} from "vuex"
export default {
    props: ['boxShow'],
    computed: {
        ...mapState('cate',['cateList'])
    },
    methods: {
        ...mapActions('cate',['addCateListActions','editCateListActions']),
        limitTips(files,fileList) {
             console.log(files, fileList)
             this.$message.warning("此处只允许上传一张封面图片")
        },
        changeImage(file,filelist) {
            console.log(file, filelist)
            this.cateForm.img = file.raw  // 添加文件
        },
        reset() {
            this.fileList = []
            this.cateForm = {
                    id: "",
                    pid: 0,
                    catename: "",
                    img: "",
                    status: 1
            }
            this.boxShow.isShow = false
        },
        submit() {
            this.$refs.refCateForm.validate( valid => {
                if(valid) {
                    // 1、传统的js方式封装FormData，使用axios进行上传
                    /*
                        三阶段学习后端项目：文件数据上传，需要进行数据编码
                        项目中前端提交普通表单，编码x-application-urlencoded
                            提交文件数据，编码multipart/form-data
                                js脚本中提交普通表单，直接使用对象格式{name: 'tom'}
                                js脚本中提交文件数据，需要创建new FormData()对象
                    */
                    let fd = new FormData() // object
                    for(let key in this.cateForm) {
                        if(this.cateForm[key] === "") continue 
                        // fd[key] = this.cateForm[key]
                        fd.append(key,this.cateForm[key])
                    }
                    // 注意：图片接口调用时，不要再提交原始表单数据
                    // 应该提交封装后的formData对象数据
                    if(this.cateForm.id) {
                        this.editCateListActions(fd)
                    } else {
                        this.addCateListActions(fd)
                    }

                    // 2、实用封装的axios完成数据的自动转换
                    // this.addCateListActions(this.cateForm)
                    this.reset()
                } else {
                    this.$message.warning("表单数据不完整，请核查")
                }
            })
        },
    },
    data() {
        return {
            fileList: [],
            // dialogFormVisible: false,
            cateForm: {
                id: "",
                pid: 0,
                catename: "",
                img: "",
                status: 1
            },
            rules: {
                 //pid: {required: true, message: "请选择上级分类", tigger: 'blur'},
                catename: {required: true, message: "分类名称不能为空", tigger: 'blur'},
                //img: {required: true, message: "请选择封面图片", tigger: 'blur'},
                //status: {required: true, message: "请选择类别状态", tigger: 'blur'},
            },
            formLabelWidth: '120px'
        }
    }
}
</script>

<style>

</style>